import React, { Component } from 'react'
import './valign.css'
import bigImg from './imgs/bigimg.png'
import img1 from './imgs/1.png'
import img2 from './imgs/2.png'
import img3 from './imgs/3.png'
import img4 from './imgs/4.png'
import img5 from './imgs/5.png'
import img6 from './imgs/6.png'

let style={
    bigimg:{
        'width':'600px',
        'height':'430px',
        'display':'inline-block',
    },
    comshow:{
        // 'width':'1200px',
        'height':'490px',
        'display':'inline-block',
    },
    imgdiv:{
        'width':'294px',
        'height':'280px',
    },
    comName:{
        'width':'294px',
        'textAlign':'center',
        'marginTop':'10px',
    },
    intro:{
        'width':'294px',
        'textAlign':'center',
        'marginTop':'10px',
    },
    price:{
        'width':'294px',
        'textAlign':'center',
        'marginTop':'20px',
        'color':'red',
    },
}

let arr1=[
    {
        img:img1,
        comName: '坚果“电池形电池”移动电源',
        intro: 'Type-C 接口、轻巧便携、多重电路保护',
        price: '￥ 49.00',
    },
    {
        img:img2,
        comName: '坚果蓝牙小黑(小白)耳机',
        intro: '一副干净的蓝牙耳机',
        price: '￥ 99.00',
    },
]
let arr2=[
    {
        img:img3,
        comName: '坚果黑方键盘',
        intro: '设计感满分的高品质键盘',
        price: '￥ 599.00',
    },
    {
        img:img4,
        comName: '坚果黑圆鼠标',
        intro: '一只手就能握住的满分设计',
        price: '￥ 299.00',
    },
    {
        img:img5,
        comName: 'Smartisan半入耳式耳机',
        intro: '经典配色、专业调音、高品质麦克风',
        price: '￥ 89.00',
    },
    {
        img:img6,
        comName: '坚果R1“足迹”系列保护套 切片面包被发明',
        intro: '1928 年 7 月 7 日',
        price: '￥ 99.00',
    },
]

class Comshow extends Component {

    render() {
        return <div className="comshow">
            <div style={style.comshow}>
                <div className='bigImg valign' style={style.bigimg}>
                    <img src={bigImg} alt="error" style={style.bigimg}/>
                </div>

                {arr1.map((com, i) => <div key={i} className='comDiv' style={style.comshow}>

                    <div className='imgDiv' style={style.imgdiv}>
                        <img src={com.img} alt="error" style={style.imgdiv}/>
                    </div>

                    <div className='comName' style={style.comName}>
                        <strong>
                            {com.comName}
                        </strong>
                    </div>

                    <div className='intor' style={style.intro}>
                        {com.intro}
                    </div>

                    <div className='price' style={style.price}>
                        <strong>
                            {com.price}
                        </strong>
                    </div>

                </div>)}
            </div>
            <div>
                {arr2.map((com, i) => <div key={i} className='comDiv' style={style.comshow}>

                    <div className='imgDiv' style={style.imgdiv}>
                        <img src={com.img} alt="error" style={style.imgdiv}/>
                    </div>

                    <div className='comName' style={style.comName}>
                        <strong>
                            {com.comName}
                        </strong>
                    </div>

                    <div className='intor' style={style.intro}>
                        {com.intro}
                    </div>

                    <div className='price' style={style.price}>
                        <strong>
                            {com.price}
                        </strong>
                    </div>

                    </div>)}
            </div>
        </div>
    }
}

export default Comshow